import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native';
import Payment from '@/components/common/pay/Payment';
import { useState } from 'react';
import { useRouter } from 'expo-router';


interface MytranslationProps {
    closeModal: () => void;  // 用于关闭模态框的函数
}




const Mytranslation: React.FC<MytranslationProps> = ({ closeModal }) => {
    const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
    const handlePress = (index: number) => {
        setSelectedIndex(index); // 更新选中的索引
    };
    const router = useRouter();
    const paymentOptions = [
        {
            id: 0,
            content: '翻译包',
            description: '7天翻译包',
            price: 38,
            originalPrice: 48,
            duration: '7天',
        },
        {
            id: 1,
            content: '翻译包',
            title: '最热销',
            description: '1年翻译包',
            price: 198,
            originalPrice: 398,
            duration: '1年',
        },
        {
            id: 2,
            content: '翻译包',
            title: '最省钱',
            description: '终身翻译包',
            price: 698,
            originalPrice: 998,
            duration: '终身',
        },
    ];

    const handlePurchase = () => {
        if (selectedIndex !== null) {
            const selectedOption = paymentOptions[selectedIndex];
            router.push({
                pathname: '/my/paymoney',
                params: {
                    content: selectedOption.content,
                    description: selectedOption.description,
                    price: selectedOption.price,
                    originalPrice: selectedOption.originalPrice,
                    duration: selectedOption.duration,
                }
            });
        }
    };

    return (
        <View style={styles.all}>
            <View style={styles.main}>
                <View style={styles.headertitle}>
                    <Text style={styles.title}>我的翻译包</Text>
                    <TouchableOpacity onPress={() => {
                        closeModal()
                    }}>
                        <Text style={styles.subtitle}>X</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.container}>
                    {paymentOptions.map((option, index) => (
                        <TouchableOpacity key={option.id} onPress={() => handlePress(index)}>
                            <Payment
                                style={[
                                    styles.card,
                                    selectedIndex === index && styles.selectedCard, // 判断是否选中
                                ]}
                                content={option.content}
                                title={option.title}
                                description={option.description}
                                price={option.price}
                                originalPrice={option.originalPrice}
                                isSelected={selectedIndex === index} // 传递选中状态
                            />
                        </TouchableOpacity>
                    ))}
                </View>
                {/* 立即购买按钮 */}
                <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.button} onPress={handlePurchase}>
                        <Text>立即购买</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
}


export default Mytranslation;

const styles = StyleSheet.create({
    subtitle: {
        fontSize: 16,
        marginRight: 20,
        marginTop: 20,
    },
    headertitle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    closeButton: {
        fontSize: 24,
        color: '#ccc',
        position: 'absolute',
        right: 10,
    },
    header: {
        alignItems: 'center',
        marginTop: 20,
    },
    content: {
        fontSize: 14,
        fontWeight: 'bold',
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginTop: 20,
        marginLeft: 120,
    },
    all: {
        backgroundColor: 'rgb(249, 249, 249)',
        height: '100%',
    },
    container: {
        marginTop: 20,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    card: {
        margin: 3,
        width: 105,
        borderWidth: 1,
        borderColor: '#ccc', // 默认边框颜色
    },
    selectedCard: {
        borderColor: '#00a676', // 选中时的边框颜色
    },
    main: {
        backgroundColor: '#fff',
        shadowColor: '#000',
        height: 280,
        alignContent: 'center',
        width: '100%',
    },
    buttonContainer: {
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'rgb(38, 235, 218)',
        padding: 10,
        borderRadius: 20,
        alignItems: 'center',
        marginTop: 20,
        width: 200,
    }
});
